<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <el-button size="small" type="primary" @click="addClients">添加客户</el-button>
          </el-col>
          <el-col :span="12">
            <el-input v-model="input" placeholder="请输入标题">
              <el-select slot="prepend" v-model="agentId" placeholder="全部经纪人" style="width:150px">
                <el-option
                  label="全部经纪人"
                  value=""
                />
                <el-option
                  v-for="agent in agentsList"
                  :key="agent.id"
                  :label="agent.name"
                  :value="agent.id"
                />
              </el-select>
              <!-- <el-select slot="prepend" v-model="agentId" placeholder="全部经纪人" style="width:150px">
                <el-option v-for="agent in agentsList" :key="agent.id" :label="agent.name" :value="agent.id" />
              </el-select> -->
              <el-button slot="append" icon="el-icon-search" @click="seek" />
            </el-input>
          </el-col>
        </el-row>
        <el-divider />
        <el-row>
          <el-table
            :data="ClientsList"
            border
            style="width: 100%"
          >
            <el-table-column
              fixed
              prop="image"
              label="图片"
              width="150px"
            >
              <template v-slot="{row}">
                <img :src="row.image" alt="" style="width:100%">
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
            />
            <el-table-column
              prop="email"
              label="邮箱"
            />
            <el-table-column
              prop="phone"
              label="电话"
            />
            <el-table-column
              prop="agent.name"
              label="经纪人"
            />
            <el-table-column
              prop="wechat"
              label="微信"
            />
            <el-table-column
              prop="desc"
              label="介绍"
            />

            <el-table-column
              fixed="right"
              label="操作"
              style="min-width:150px"
            >
              <template #default="{row}">
                <el-button type="primary" size="small" @click="editClients(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delClients(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row type="flex" justify="center" style="margin-top:20px">
          <el-pagination
            :current-page.sync="page"
            :page-sizes="[2, 4, 8, 16]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
    </div>
    <handleDialog ref="handleDialog" :is-show-dislog.sync="isShowDislog" />
  </div>
</template>

<script>
import { getAgents } from '@/api/agents'
import handleDialog from './components/handleDialog.vue'
import { getClientsApi, delClientsApi, getClientsCounApi } from '@/api/client'
export default {
  components: {
    handleDialog
  },
  data() {
    return {
      agentId: '',
      agentsList: [],
      page: 1, // 显示第几页
      pageSize: 2, // 每页显示条数
      total: 0, // 总条数
      input: '',
      name: '',
      ClientsList: [],
      isShowDislog: false,
      agentContains: ''
    }
  },
  created() {
    this.getClients()
    this.getClientsCoun()
    this.getAgents()
  },
  methods: {
    // 编辑后重新获取数据
    async getEditing(clients) {
      // console.log('----', clients)
      if (this.agentContains) {
        await this.queryClients(this.agentContains)
      } else {
        await this.queryClients()
      }
      if (this.ClientsList.length === 0 && this.page > 1) {
        this.page--
      }
      // if (oldAgent || oldname) {
      //   if (this.ClientsList.length === 1 && this.page > 1) {
      //     if (clients.name.includes(oldname) && oldAgent === clients.agent.id) {
      //       this.page
      //     } else {
      //       this.page--
      //     }
      //   }
      // }
      if (this.agentContains) {
        this.queryClients(this.agentContains)
        this.getClientsCoun(this.agentContains)
      } else {
        this.queryClients()
        this.getClientsCoun()
      }
    },
    // 新增后重新获取数据
    getAdding() {
      this.agentId = ''
      this.agentContains = ''
      this.input = ''
      this.getClients()
      if (this.agentContains) {
        this.getClientsCoun(this.agentContains)
      } else {
        this.getClientsCoun()
      }
    },

    // 获取经纪人列表
    async getAgents() {
      this.agentsList = await getAgents()
    },
    // 每页条数改变触发
    handleSizeChange(val) {
      this.pageSize = val
      if (this.agentContains) {
        this.queryClients(this.agentContains)
      } else {
        this.queryClients()
      }
    },
    // 页面改变触发
    handleCurrentChange(val) {
      console.log(this.agentId)
      this.page = val
      if (this.agentContains) {
        this.queryClients(this.agentContains)
      } else {
        this.queryClients()
      }
    },
    // 搜索
    seek() {
      this.page = 1
      this.agentContains = this.agentId
      this.name = this.input
      if (this.agentContains) {
        this.queryClients(this.agentContains)
        this.getClientsCoun(this.agentContains)
      } else {
        this.queryClients()
        this.getClientsCoun()
      }
    },
    // 查询
    async queryClients(agent) {
      const res = await getClientsApi({ _limit: this.pageSize, _start: (this.page - 1) * this.pageSize, name_contains: this.name, agent })
      this.ClientsList = res
      // console.log(res)
    },
    // 获取总条数
    async getClientsCoun(agent) {
      const res = await getClientsCounApi({ name_contains: this.name, agent })
      // console.log(res)
      this.total = res
    },
    // 新增
    async addClients() {
      this.isShowDislog = true
    },
    // 编辑
    async editClients(id) {
      await this.$refs.handleDialog.getCategory(id)
      this.isShowDislog = true

      this.$nextTick(() => {
        this.$refs.handleDialog.getImage()
      })
    },

    // 删除
    async delClients(id) {
      if (this.page > 1 && this.ClientsList.length === 1) {
        this.page--
      }
      // console.log(id)
      await delClientsApi(id)
      this.$message.success('删除成功')

      // 重新获取数据
      this.queryClients()
      this.getClientsCoun()
    },

    // 获取客户列表
    async getClients() {
      const res = await getClientsApi({ _limit: this.pageSize, _start: (this.page - 1) * this.pageSize })
      console.log(res)
      this.ClientsList = res
    }

  }

}
</script>

<style>
</style>
